<template>
<div class="color-theme-blue mont-font">
<div class="preloader"></div>
<div class="main-wrapper">

    <!-- navigation top-->
    <TopNav></TopNav>
    <!-- navigation top -->

    <!-- navigation left -->
    <LeftNav></LeftNav>
    <!-- navigation left -->

    <!-- main content -->
    <div class="main-content right-chat-active gbtopnav">

        <div class="middle-sidebar-bottom">
            <div class="middle-sidebar-left">
                <!-- loader wrapper -->
                <div class="preloader-wrap p-3">
                    <div class="box shimmer">
                        <div class="lines">
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                        </div>
                    </div>
                    <div class="box shimmer mb-3">
                        <div class="lines">
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                        </div>
                    </div>
                    <div class="box shimmer">
                        <div class="lines">
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                            <div class="line s_shimmer"></div>
                        </div>
                    </div>
                </div>
                <!-- loader wrapper -->
                <div class="row feed-body">
                    <div class="col-xl-8 col-xxl-9 col-lg-8">


<!--                        <div class="card w-100 shadow-none bg-transparent bg-transparent-card border-0 p-0 mb-0">-->
<!--                            <div class="owl-carousel category-card owl-theme overflow-hidden nav-none">-->
                              <!--添加故事 -->
                                <div class="item item-carousel">

                                  <el-carousel :interval="5000" arrow="always">
                                    <el-carousel-item v-for="(image, index) in images" :key="index">
                                      <img :src="image.src" alt="Carousel Image">
                                    </el-carousel-item>
                                  </el-carousel>

<!--                                  <el-carousel :height="'auto'" :interval="3000" type="card">-->
<!--                                    <el-carousel-item v-for="(item, index) in images" :key="index">-->
<!--                                      <img :src="item.src" class="carousel-image" alt="carousel image" />-->
<!--                                    </el-carousel-item>-->
<!--                                  </el-carousel>-->

<!--                                    <div data-bs-toggle="modal" data-bs-target="#Modalstory" class="card w125 h200 d-block border-0 shadow-none rounded-xxxl bg-dark overflow-hidden mb-3 mt-3">-->
<!--                                        <div class="card-body d-block p-3 w-100 position-absolute bottom-0 text-center">-->
<!--                                            <a href="#">-->
<!--                                                <span class="btn-round-lg bg-white"><i class="feather-plus font-lg"></i></span>-->
<!--                                                <div class="clearfix"></div>-->
<!--                                                <h4 class="fw-700 position-relative z-index-1 ls-1 font-xssss text-white mt-2 mb-1">Add Story </h4>-->
<!--                                            </a>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>

<!--                            </div>-->
<!--                        </div>-->


                        <!--最新消息-->
                      <div style="margin-top: 10px">
                        <div class="marquee-container">
                          <div class="announcement">🔈【公告】</div>
                          <div class="message_casting">
                            <Message_casting></Message_casting>
                          </div>
                        </div>

                      </div>
                        <!--首页内容-->
                      <Message_publish></Message_publish>
<!--                        <div style="margin-top: 20px" class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">-->
<!--                            &lt;!&ndash;发布图片视频&ndash;&gt;-->
<!--                            <div class="card-body p-0">-->
<!--                                <a href="#" class=" font-xssss fw-600 text-grey-500 card-body p-0 d-flex align-items-center"><i class="btn-round-sm font-xs text-primary feather-edit-3 me-2 bg-greylight"></i>Create Post</a>-->
<!--                            </div>-->
<!--                            <div class="card-body p-0 mt-3 position-relative">-->
<!--                                <figure class="avatar position-absolute ms-2 mt-1 top-5"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w30"></figure>-->
<!--                                <textarea name="message" class="h100 bor-0 w-100 rounded-xxl p-2 ps-5 font-xssss text-grey-500 fw-500 border-light-md theme-dark-bg" cols="30" rows="10" placeholder="What's on your mind?"></textarea>-->
<!--                            </div>-->
<!--                            <div class="card-body d-flex p-0 mt-0">-->
<!--                                <a href="#" class="d-flex align-items-center font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i class="font-md text-danger feather-video me-2"></i><span class="d-none-xs">Live Video</span></a>-->
<!--                                <a href="#" class="d-flex align-items-center font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i class="font-md text-success feather-image me-2"></i><span class="d-none-xs">Photo/Video</span></a>-->
<!--                                <a href="#" class="d-flex align-items-center font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i class="font-md text-warning feather-camera me-2"></i><span class="d-none-xs">Feeling/Activity</span></a>-->
<!--                                <a href="#" class="ms-auto" id="dropdownMenu4" data-bs-toggle="dropdown" aria-expanded="false"><i class="text-grey-900 btn-round-md bg-greylight font-xss"><svg t="1712377720051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10551" width="32" height="32"><path d="M324.078 650.246c-0.908 0-1.82-0.152-2.698-0.46L5.452 538.886a8.152 8.152 0 0 1-0.388-15.234l1007.7-412.284a8.152 8.152 0 0 1 8.002 14.044L328.994 648.596a8.134 8.134 0 0 1-4.916 1.65z m-292.98-119.632l291.552 102.344 638.396-482.82L31.098 530.614z" fill="#1296db" p-id="10552"></path><path d="M84.64 529.254l748.538-306.252-513.86 388.63z" fill="#1296db" p-id="10553"></path><path d="M324.08 956.712a8.15 8.15 0 0 1-8.154-8.152V642.096c0-2.554 1.196-4.96 3.234-6.5L1010.932 112.412a8.154 8.154 0 0 1 10.674 12.272L465.634 679.326l-134.244 272.832a8.152 8.152 0 0 1-7.31 4.554z m8.148-310.56v267.384l119.38-242.622c0.396-0.804 0.92-1.538 1.554-2.172L925.794 197.238 332.228 646.152z" fill="#1296db" p-id="10554"></path><path d="M351.246 655.612L715.666 380 436.534 658.468l-85.288 173.338z" fill="#1296db" p-id="10555"></path><path d="M792.56 823.806c-1.08 0-2.16-0.214-3.176-0.644l-333.642-141.146a8.152 8.152 0 0 1-2.582-13.276l556.932-555.6a8.144 8.144 0 0 1 10.004-1.184 8.146 8.146 0 0 1 3.512 9.442L800.322 818.144a8.148 8.148 0 0 1-7.762 5.662z m-319.308-152.08l314.272 132.948L997.846 148.384 473.252 671.726z" fill="#1296db" p-id="10556"></path><path d="M506.694 665.226l449.142-448.07-180.074 561.896z" fill="#1296db" p-id="10557"></path><path d="M324.074 956.71a8.148 8.148 0 0 1-7.31-11.75l134.842-274.048a8.15 8.15 0 0 1 10.488-3.906l80.838 34.198a8.142 8.142 0 0 1 2.884 12.954l-215.68 239.85a8.128 8.128 0 0 1-6.062 2.702z m138.758-271.692l-105.45 214.316 168.668-187.572-63.218-26.744z" fill="#1296db" p-id="10558"></path><path d="M471.966 709.532l22.108 9.352-58.982 65.592z" fill="#1296db" p-id="10559"></path><path d="M238.726 334.924l-0.16-16.3a117.158 117.158 0 0 0 15.184-1.144l2.276 16.142c-5.718 0.808-11.54 1.246-17.3 1.302z m-17.318-0.96a134.04 134.04 0 0 1-17.044-3.202l4.044-15.792a117.31 117.31 0 0 0 14.958 2.81l-1.958 16.184z m51.6-3.874l-4.346-15.712a125.064 125.064 0 0 0 5.052-1.514l9.822-3.512 5.482 15.35-10.05 3.59a137.816 137.816 0 0 1-5.96 1.798z m-85.126-4.706a135.124 135.124 0 0 1-15.656-7.452l7.944-14.236a118.308 118.308 0 0 0 13.756 6.55l-6.044 15.138z m116.486-6.166l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m-146.704-10.688a134.832 134.832 0 0 1-13.242-11.21l11.318-11.732a117.724 117.724 0 0 0 11.628 9.844l-9.704 13.098z m177.406-0.276l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.704-10.964l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.702-10.966l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m-263.73-1.84a133.368 133.368 0 0 1-9.912-14.252l13.96-8.412a117.14 117.14 0 0 0 8.696 12.504l-12.744 10.16z m294.432-9.126l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.7-10.964l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482zM114.866 254.82a137.726 137.726 0 0 1-4.734-12.464 152.826 152.826 0 0 1-1.176-3.82l15.648-4.574c0.328 1.128 0.676 2.254 1.038 3.38 1.2 3.69 2.6 7.384 4.16 10.958l-14.936 6.52z m373.714-1.39l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.702-10.966l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.702-10.964l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m-444.812-9.88a133.034 133.034 0 0 1-1.562-17.288l16.296-0.4c0.124 5.062 0.586 10.162 1.372 15.158l-16.106 2.53z m475.516-1.086l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.702-10.964l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.702-10.966l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482zM120.522 188.72l-16.21-1.72c0.608-5.722 1.6-11.47 2.948-17.088l15.85 3.804a118.068 118.068 0 0 0-2.588 15.004z m552.272-1.08l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.702-10.966l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.702-10.964l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m-384.946-0.922a119.088 119.088 0 0 0-5.62-14.164l14.736-6.972a135.366 135.366 0 0 1 6.388 16.112l-15.504 5.024z m-221.64-5.618l-15.224-5.824a135.244 135.244 0 0 1 7.22-15.76l14.354 7.732a118.2 118.2 0 0 0-6.35 13.852z m637.288-4.424l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m30.704-10.966l-5.482-15.35 15.35-5.482 5.482 15.35-15.35 5.482z m-459.362-6.464a117.96 117.96 0 0 0-9.068-12.242l12.444-10.53a134.04 134.04 0 0 1 10.326 13.942l-13.702 8.83z m-194.208-4.922l-13.24-9.508a133.96 133.96 0 0 1 11.01-13.404l11.896 11.14a118.664 118.664 0 0 0-9.666 11.772z m174.556-18.268a118.092 118.092 0 0 0-11.916-9.494l9.312-13.376a134.592 134.592 0 0 1 13.566 10.808l-10.962 12.062z m-153.772-3.92l-10.352-12.594a133.558 133.558 0 0 1 14.102-10.122l8.622 13.834a116.85 116.85 0 0 0-12.372 8.882z m128.818-13.454a118.392 118.392 0 0 0-13.944-6.136l5.588-15.314a134.468 134.468 0 0 1 15.87 6.986l-7.514 14.464z m-103.026-2.62l-6.754-14.836a135.878 135.878 0 0 1 14.294-5.548l1.9-0.6 4.812 15.574-1.682 0.532a118.488 118.488 0 0 0-12.57 4.878z m74.464-7.808c-4.94-1.108-10-1.904-15.038-2.362l1.48-16.234c5.738 0.522 11.502 1.428 17.128 2.692l-3.57 15.904z m-45.394-1.15l-2.764-16.064a133.748 133.748 0 0 1 17.254-1.822l0.652 16.288c-5.056 0.202-10.15 0.74-15.142 1.598zM888.778 773.172l-15.866-3.746 3.746-15.864 15.866 3.746-3.746 15.864z m7.49-31.728l-15.866-3.746 3.746-15.866 15.866 3.746-3.746 15.866z m7.492-31.73l-15.866-3.746 3.746-15.864 15.866 3.746-3.746 15.864z m7.492-31.728l-15.866-3.746 3.746-15.864 15.866 3.746-3.746 15.864z m7.49-31.73l-15.866-3.746 3.746-15.866 15.866 3.746-3.746 15.866z m7.494-31.73l-15.866-3.746 3.746-15.864 15.866 3.746-3.746 15.864z m7.492-31.728l-15.866-3.746 3.746-15.864 15.866 3.746-3.746 15.864z m7.49-31.728l-15.866-3.746 3.746-15.866 15.866 3.746-3.746 15.866z m7.492-31.73l-15.866-3.746 3.746-15.864 15.866 3.746-3.746 15.864z" fill="#1296db" p-id="10560"></path></svg></i></a>-->
<!--                                <div style="display: none" class="dropdown-menu dropdown-menu-start p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu4">-->
<!--                                    <div class="card-body p-0 d-flex">-->
<!--                                        <i class="feather-bookmark text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Save Link <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Add this to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="card-body p-0 d-flex mt-2">-->
<!--                                        <i class="feather-alert-circle text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide Post <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="card-body p-0 d-flex mt-2">-->
<!--                                        <i class="feather-alert-octagon text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide all from Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="card-body p-0 d-flex mt-2">-->
<!--                                        <i class="feather-lock text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 mb-0 text-grey-900 font-xssss mt-0 me-4">Unfollow Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->


                        <div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-3">
                            <div class="card-body p-0 d-flex">
                                <figure class="avatar me-3"><img src="/images/user-7.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Surfiya Zakir  <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">3 hour ago</span></h4>
<!--                                <a href="#" class="ms-auto" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>-->
<!--                                <div class="dropdown-menu dropdown-menu-end p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu2">-->
<!--                                    <div class="card-body p-0 d-flex">-->
<!--                                        <i class="feather-bookmark text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Save Link <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Add this to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="card-body p-0 d-flex mt-2">-->
<!--                                        <i class="feather-alert-circle text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide Post <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="card-body p-0 d-flex mt-2">-->
<!--                                        <i class="feather-alert-octagon text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide all from Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                    <div class="card-body p-0 d-flex mt-2">-->
<!--                                        <i class="feather-lock text-grey-500 me-3 font-lg"></i>-->
<!--                                        <h4 class="fw-600 mb-0 text-grey-900 font-xssss mt-0 me-4">Unfollow Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>-->
<!--                                    </div>-->
<!--                                </div>-->
                            </div>
                            <div class="card-body p-0 me-lg-5">
                                <p class="fw-500 text-grey-500 lh-26 font-xssss w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ms-2">See more</a></p>
                            </div>
                            <div class="card-body d-block p-0">
                                <div class="row ps-2 pe-2">
                                    <div class="col-xs-4 col-sm-4 p-1"><a href="#"><img src="/images/t-10.jpg" class="rounded-3 w-100" alt="image"></a></div>
                                    <div class="col-xs-4 col-sm-4 p-1"><a href="#" ><img src="/images/t-11.jpg" class="rounded-3 w-100" alt="image"></a></div>
                                    <div class="col-xs-4 col-sm-4 p-1"><a href="#"  class="position-relative d-block"><img src="/images/t-12.jpg" class="rounded-3 w-100" alt="image"><span class="img-count font-sm text-white ls-3 fw-600"><b>+2</b></span></a></div>
                                </div>
                            </div>
                            <div class="card-body d-flex p-0 mt-3">
                                <a href="#" class="emoji-bttn d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss me-2"><i class="feather-thumbs-up text-white bg-primary-gradiant me-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant me-2 btn-round-xs font-xss"></i>2.8K Like</a>
                                <div class="emoji-wrap">
                                    <ul class="emojis list-inline mb-0">
                                        <li class="emoji list-inline-item"><i class="em em---1"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-angry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-anguished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-astonished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-blush"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-clap"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-cry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-full_moon_with_face"></i></li>
                                    </ul>
                                </div>
                                <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i><span class="d-none-xss">22 Comment</span></a>
<!--                                <a href="#" id="dropdownMenu21" data-bs-toggle="dropdown" aria-expanded="false" class="ms-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>-->
<!--                                <div class="dropdown-menu dropdown-menu-end p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu21">-->
<!--                                    <h4 class="fw-700 font-xss text-grey-900 d-flex align-items-center">Share <i class="feather-x ms-auto font-xssss btn-round-xs bg-greylight text-grey-900 me-2"></i></h4>-->
<!--                                    <div class="card-body p-0 d-flex">-->
<!--                                        <ul class="d-flex align-items-center justify-content-between mt-2">-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-facebook"><i class="font-xs ti-facebook text-white"></i></a></li>-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-twiiter"><i class="font-xs ti-twitter-alt text-white"></i></a></li>-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-linkedin"><i class="font-xs ti-linkedin text-white"></i></a></li>-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-instagram"><i class="font-xs ti-instagram text-white"></i></a></li>-->
<!--                                            <li><a href="#" class="btn-round-lg bg-pinterest"><i class="font-xs ti-pinterest text-white"></i></a></li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                    <div class="card-body p-0 d-flex">-->
<!--                                        <ul class="d-flex align-items-center justify-content-between mt-2">-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-tumblr"><i class="font-xs ti-tumblr text-white"></i></a></li>-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-youtube"><i class="font-xs ti-youtube text-white"></i></a></li>-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-flicker"><i class="font-xs ti-flickr text-white"></i></a></li>-->
<!--                                            <li class="me-1"><a href="#" class="btn-round-lg bg-black"><i class="font-xs ti-vimeo-alt text-white"></i></a></li>-->
<!--                                            <li><a href="#" class="btn-round-lg bg-whatsup"><i class="font-xs feather-phone text-white"></i></a></li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                    <h4 class="fw-700 font-xssss mt-4 text-grey-500 d-flex align-items-center mb-3">Copy Link</h4>-->
<!--                                    <i class="feather-copy position-absolute right-35 mt-3 font-xs text-grey-500"></i>-->
<!--                                    <input type="text" value="https://socia.be/1rGxjoJKVF0" class="bg-grey text-grey-500 font-xssss border-0 lh-32 p-2 font-xssss fw-600 rounded-3 w-100 theme-dark-bg">-->
<!--                                </div>-->
                            </div>
                        </div>

                        <div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-0">
                            <div class="card-body p-0 d-flex">
                                <figure class="avatar me-3 m-0"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Goria Coast  <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">2 hour ago</span></h4>
                                <a href="#" class="ms-auto" id="dropdownMenu6" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>
                                <div class="dropdown-menu dropdown-menu-end p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu6">
                                    <div class="card-body p-0 d-flex">
                                        <i class="feather-bookmark text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Save Link <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Add this to your saved items</span></h4>
                                    </div>
                                    <div class="card-body p-0 d-flex mt-2">
                                        <i class="feather-alert-circle text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide Post <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>
                                    </div>
                                    <div class="card-body p-0 d-flex mt-2">
                                        <i class="feather-alert-octagon text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide all from Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>
                                    </div>
                                    <div class="card-body p-0 d-flex mt-2">
                                        <i class="feather-lock text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 mb-0 text-grey-900 font-xssss mt-0 me-4">Unfollow Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-0 me-lg-5">
                                <p class="fw-500 text-grey-500 lh-26 font-xssss w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ms-2">See more</a></p>
                            </div>
                            <div class="card-body d-flex p-0">
                                <a href="#" class="emoji-bttn d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss me-2"><i class="feather-thumbs-up text-white bg-primary-gradiant me-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant me-2 btn-round-xs font-xss"></i>2.8K Like</a>
                                <div class="emoji-wrap">
                                    <ul class="emojis list-inline mb-0">
                                        <li class="emoji list-inline-item"><i class="em em---1"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-angry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-anguished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-astonished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-blush"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-clap"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-cry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-full_moon_with_face"></i></li>
                                    </ul>
                                </div>
                                <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i><span class="d-none-xss">22 Comment</span></a>
                                <a href="#" id="dropdownMenu31" data-bs-toggle="dropdown" aria-expanded="false" class="ms-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>
                                <div class="dropdown-menu dropdown-menu-end p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu31">
                                    <h4 class="fw-700 font-xss text-grey-900 d-flex align-items-center">Share <i class="feather-x ms-auto font-xssss btn-round-xs bg-greylight text-grey-900 me-2"></i></h4>
                                    <div class="card-body p-0 d-flex">
                                        <ul class="d-flex align-items-center justify-content-between mt-2">
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-facebook"><i class="font-xs ti-facebook text-white"></i></a></li>
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-twiiter"><i class="font-xs ti-twitter-alt text-white"></i></a></li>
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-linkedin"><i class="font-xs ti-linkedin text-white"></i></a></li>
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-instagram"><i class="font-xs ti-instagram text-white"></i></a></li>
                                            <li><a href="#" class="btn-round-lg bg-pinterest"><i class="font-xs ti-pinterest text-white"></i></a></li>
                                        </ul>
                                    </div>
                                    <div class="card-body p-0 d-flex">
                                        <ul class="d-flex align-items-center justify-content-between mt-2">
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-tumblr"><i class="font-xs ti-tumblr text-white"></i></a></li>
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-youtube"><i class="font-xs ti-youtube text-white"></i></a></li>
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-flicker"><i class="font-xs ti-flickr text-white"></i></a></li>
                                            <li class="me-1"><a href="#" class="btn-round-lg bg-black"><i class="font-xs ti-vimeo-alt text-white"></i></a></li>
                                            <li><a href="#" class="btn-round-lg bg-whatsup"><i class="font-xs feather-phone text-white"></i></a></li>
                                        </ul>
                                    </div>
                                    <h4 class="fw-700 font-xssss mt-4 text-grey-500 d-flex align-items-center mb-3">Copy Link</h4>
                                    <i class="feather-copy position-absolute right-35 mt-3 font-xs text-grey-500"></i>
                                    <input type="text" value="https://socia.be/1rGxjoJKVF0" class="bg-grey text-grey-500 font-xssss border-0 lh-32 p-2 font-xssss fw-600 rounded-3 w-100 theme-dark-bg">
                                </div>
                            </div>
                        </div>

                        <div class="card w-100 shadow-none bg-transparent bg-transparent-card border-0 p-0 mb-0">
                            <div class="owl-carousel category-card owl-theme overflow-hidden nav-none">
                                <div class="item">
                                    <div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(/images/u-bg.jpg);"></div>
                                        <div class="card-body d-block w-100 ps-4 pe-4 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="/images/user-11.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xsss mt-2 mb-1">Aliqa Macale </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
                                            <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-3 text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
                                            <div class="clearfix mb-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(/images/s-2.jpg);"></div>
                                        <div class="card-body d-block w-100 ps-4 pe-4 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="/images/user-2.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xsss mt-2 mb-1">Seary Victor </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
                                            <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-3 text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
                                            <div class="clearfix mb-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(/images/s-6.jpg);"></div>
                                        <div class="card-body d-block w-100 ps-4 pe-4 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="/images/user-3.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xsss mt-2 mb-1">John Steere </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
                                            <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-3 text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
                                            <div class="clearfix mb-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(/images/bb-16.png);"></div>
                                        <div class="card-body d-block w-100 ps-4 pe-4 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="/images/user-4.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xsss mt-2 mb-1">Mohannad Zitoun </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
                                            <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-3 text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
                                            <div class="clearfix mb-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(/images/e-4.jpg);"></div>
                                        <div class="card-body d-block w-100 ps-4 pe-4 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="/images/user-7.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xsss mt-2 mb-1">Studio Express </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
                                            <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-3 text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
                                            <div class="clearfix mb-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(/images/coming-soon.png);"></div>
                                        <div class="card-body d-block w-100 ps-4 pe-4 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="/images/user-5.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xsss mt-2 mb-1">Hendrix Stamp </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
                                            <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-3 text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
                                            <div class="clearfix mb-2"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="card w200 d-block border-0 shadow-xss rounded-xxl overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body position-relative h100 bg-image-cover bg-image-center" style="background-image: url(/images/bb-9.jpg);"></div>
                                        <div class="card-body d-block w-100 ps-4 pe-4 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 mt--6 position-relative w75 z-index-1"><img src="/images/user-6.png" alt="image" class="float-right p-1 bg-white rounded-circle w-100"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xsss mt-2 mb-1">Mohannad Zitoun </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-2">support@gmail.com</p>
                                            <span class="live-tag mt-2 mb-0 bg-danger p-2 z-index-1 rounded-3 text-white font-xsssss text-uppersace fw-700 ls-3">LIVE</span>
                                            <div class="clearfix mb-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-3">
                            <div class="card-body p-0 d-flex">
                                <figure class="avatar me-3"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">2 hour ago</span></h4>
                                <a href="#" class="ms-auto" id="dropdownMenu5" data-bs-toggle="dropdown" aria-expanded="false"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>
                                <div class="dropdown-menu dropdown-menu-start p-4 rounded-xxl border-0 shadow-lg" aria-labelledby="dropdownMenu5">
                                    <div class="card-body p-0 d-flex">
                                        <i class="feather-bookmark text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Save Link <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Add this to your saved items</span></h4>
                                    </div>
                                    <div class="card-body p-0 d-flex mt-2">
                                        <i class="feather-alert-circle text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide Post <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>
                                    </div>
                                    <div class="card-body p-0 d-flex mt-2">
                                        <i class="feather-alert-octagon text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 text-grey-900 font-xssss mt-0 me-4">Hide all from Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>
                                    </div>
                                    <div class="card-body p-0 d-flex mt-2">
                                        <i class="feather-lock text-grey-500 me-3 font-lg"></i>
                                        <h4 class="fw-600 mb-0 text-grey-900 font-xssss mt-0 me-4">Unfollow Group <span class="d-block font-xsssss fw-500 mt-1 lh-3 text-grey-500">Save to your saved items</span></h4>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-0 mb-3 rounded-3 overflow-hidden">
                                <a href="default-video.html" class="video-btn">
                                    <video autoplay loop class="float-right w-100">
<!--                                        <source src="https://qiniu.maoye.vip/mp4/jiuzhuandachang.mp4" type="video/mp4">-->
                                    </video>
                                </a>
                            </div>
                            <div class="card-body p-0 me-lg-5">
                                <p class="fw-500 text-grey-500 lh-26 font-xssss w-100 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ms-2">See more</a></p>
                            </div>
                            <div class="card-body d-flex p-0">
                                <a href="#" class="emoji-bttn d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss me-2"><i class="feather-thumbs-up text-white bg-primary-gradiant me-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant me-2 btn-round-xs font-xss"></i>2.8K Like</a>
                                <div class="emoji-wrap">
                                    <ul class="emojis list-inline mb-0">
                                        <li class="emoji list-inline-item"><i class="em em---1"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-angry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-anguished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-astonished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-blush"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-clap"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-cry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-full_moon_with_face"></i></li>
                                    </ul>
                                </div>
                                <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i><span class="d-none-xss">22 Comment</span></a>
                                <a href="#" class="ms-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>
                            </div>
                        </div>

                        <div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-0">
                            <div class="card-body p-0 d-flex">
                                <figure class="avatar me-3"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">2 hour ago</span></h4>
                                <a href="#" class="ms-auto"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>
                            </div>

                            <div class="card-body p-0 me-lg-5">
                                <p class="fw-500 text-grey-500 lh-26 font-xssss w-100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ms-2">See more</a></p>
                            </div>
                            <div class="card-body d-block p-0 mb-3">
                                <div class="row ps-2 pe-2">
                                    <div class="col-xs-6 col-sm-6 p-1"><a href="/images/t-36.jpg" data-lightbox="roadtri"><img src="/images/t-21.jpg" class="rounded-3 w-100" alt="image"></a></div>
                                    <div class="col-xs-6 col-sm-6 p-1"><a href="/images/t-32.jpg" data-lightbox="roadtri"><img src="/images/t-22.jpg" class="rounded-3 w-100" alt="image"></a></div>
                                </div>
                                <div class="row ps-2 pe-2">
                                    <div class="col-xs-4 col-sm-4 p-1"><a href="/images/t-33.jpg" data-lightbox="roadtri"><img src="/images/t-23.jpg" class="rounded-3 w-100" alt="image"></a></div>
                                    <div class="col-xs-4 col-sm-4 p-1"><a href="/images/t-34.jpg" data-lightbox="roadtri"><img src="/images/t-24.jpg" class="rounded-3 w-100" alt="image"></a></div>
                                    <div class="col-xs-4 col-sm-4 p-1"><a href="/images/t-35.jpg" data-lightbox="roadtri" class="position-relative d-block"><img src="/images/t-25.jpg" class="rounded-3 w-100" alt="image"><span class="img-count font-sm text-white ls-3 fw-600"><b>+2</b></span></a></div>
                                </div>
                            </div>
                            <div class="card-body d-flex p-0">
                                <a href="#" class="emoji-bttn d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss me-2"><i class="feather-thumbs-up text-white bg-primary-gradiant me-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant me-2 btn-round-xs font-xss"></i>2.8K Like</a>
                                <div class="emoji-wrap">
                                    <ul class="emojis list-inline mb-0">
                                        <li class="emoji list-inline-item"><i class="em em---1"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-angry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-anguished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-astonished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-blush"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-clap"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-cry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-full_moon_with_face"></i></li>
                                    </ul>
                                </div>
                                <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i><span class="d-none-xss">22 Comment</span></a>
                                <a href="#" class="ms-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>
                            </div>
                        </div>

                        <div class="card w-100 shadow-none bg-transparent bg-transparent-card border-0 p-0 mb-0">
                            <div class="owl-carousel category-card owl-theme overflow-hidden nav-none">
                                <div class="item">
                                    <div class="card w150 d-block border-0 shadow-xss rounded-3 overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body d-block w-100 ps-3 pe-3 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 position-relative w65 z-index-1"><img src="/images/user-11.png" alt="image" class="float-right p-0 bg-white rounded-circle w-100 shadow-xss"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xssss mt-3 mb-1">Richard Bowers  </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-3">@macale343</p>
                                            <a href="#" class="text-center p-2 lh-20 w100 ms-1 ls-3 d-inline-block rounded-xl bg-success font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="card w150 d-block border-0 shadow-xss rounded-3 overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body d-block w-100 ps-3 pe-3 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 position-relative w65 z-index-1"><img src="/images/user-9.png" alt="image" class="float-right p-0 bg-white rounded-circle w-100 shadow-xss"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xssss mt-3 mb-1">David Goria </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-3">@macale343</p>
                                            <a href="#" class="text-center p-2 lh-20 w100 ms-1 ls-3 d-inline-block rounded-xl bg-success font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="card w150 d-block border-0 shadow-xss rounded-3 overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body d-block w-100 ps-3 pe-3 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 position-relative w65 z-index-1"><img src="/images/user-12.png" alt="image" class="float-right p-0 bg-white rounded-circle w-100 shadow-xss"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xssss mt-3 mb-1">Vincent Parks  </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-3">@macale343</p>
                                            <a href="#" class="text-center p-2 lh-20 w100 ms-1 ls-3 d-inline-block rounded-xl bg-success font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="card w150 d-block border-0 shadow-xss rounded-3 overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body d-block w-100 ps-3 pe-3 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 position-relative w65 z-index-1"><img src="/images/user-8.png" alt="image" class="float-right p-0 bg-white rounded-circle w-100 shadow-xss"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xssss mt-3 mb-1">Studio Express </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-3">@macale343</p>
                                            <a href="#" class="text-center p-2 lh-20 w100 ms-1 ls-3 d-inline-block rounded-xl bg-success font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="card w150 d-block border-0 shadow-xss rounded-3 overflow-hidden mb-3 me-2 mt-3">
                                        <div class="card-body d-block w-100 ps-3 pe-3 pb-4 text-center">
                                            <figure class="avatar ms-auto me-auto mb-0 position-relative w65 z-index-1"><img src="/images/user-7.png" alt="image" class="float-right p-0 bg-white rounded-circle w-100 shadow-xss"></figure>
                                            <div class="clearfix"></div>
                                            <h4 class="fw-700 font-xssss mt-3 mb-1">Aliqa Macale </h4>
                                            <p class="fw-500 font-xsssss text-grey-500 mt-0 mb-3">@macale343</p>
                                            <a href="#" class="text-center p-2 lh-20 w100 ms-1 ls-3 d-inline-block rounded-xl bg-success font-xsssss fw-700 ls-lg text-white">FOLLOW</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-3">
                            <div class="card-body p-0 d-flex">
                                <figure class="avatar me-3"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">2 hour ago</span></h4>
                                <a href="#" class="ms-auto"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>
                            </div>
                            <div class="card-body p-0 mb-3 rounded-3 overflow-hidden">
                                <a href="default-video.html" class="video-btn">
                                    <video autoplay loop class="float-right w-100">
<!--                                        <source src="https://qiniu.maoye.vip/mp4/jiuzhuandachang.mp4" type="video/mp4">-->
                                    </video>
                                </a>
                            </div>
                            <div class="card-body p-0 me-lg-5">
                                <p class="fw-500 text-grey-500 lh-26 font-xssss w-100 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ms-2">See more</a></p>
                            </div>
                            <div class="card-body d-flex p-0">
                                <a href="#" class="emoji-bttn d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss me-2"><i class="feather-thumbs-up text-white bg-primary-gradiant me-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant me-2 btn-round-xs font-xss"></i>2.8K Like</a>
                                <div class="emoji-wrap">
                                    <ul class="emojis list-inline mb-0">
                                        <li class="emoji list-inline-item"><i class="em em---1"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-angry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-anguished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-astonished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-blush"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-clap"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-cry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-full_moon_with_face"></i></li>
                                    </ul>
                                </div>
                                <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i><span class="d-none-xss">22 Comment</span></a>
                                <a href="#" class="ms-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>
                            </div>
                        </div>

                        <div class="card w-100 shadow-xss rounded-xxl border-0 p-4 mb-0">
                            <div class="card-body p-0 d-flex">
                                <figure class="avatar me-3"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">2 hour ago</span></h4>
                                <a href="#" class="ms-auto"><i class="ti-more-alt text-grey-900 btn-round-md bg-greylight font-xss"></i></a>
                            </div>
                            <div class="card-body p-0 me-lg-5">
                                <p class="fw-500 text-grey-500 lh-26 font-xssss w-100 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla dolor, ornare at commodo non, feugiat non nisi. Phasellus faucibus mollis pharetra. Proin blandit ac massa sed rhoncus <a href="#" class="fw-600 text-primary ms-2">See more</a></p>
                            </div>
                            <div class="card-body d-block p-0 mb-3">
                                <div class="row ps-2 pe-2">
                                    <div class="col-sm-12 p-1"><a href="/images/t-30.jpg" data-lightbox="roadtr"><img src="/images/t-31.jpg" class="rounded-3 w-100" alt="image"></a></div>
                                </div>
                            </div>
                            <div class="card-body d-flex p-0">
                                <a href="#" class="emoji-bttn d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss me-2"><i class="feather-thumbs-up text-white bg-primary-gradiant me-1 btn-round-xs font-xss"></i> <i class="feather-heart text-white bg-red-gradiant me-2 btn-round-xs font-xss"></i>2.8K Like</a>
                                <div class="emoji-wrap">
                                    <ul class="emojis list-inline mb-0">
                                        <li class="emoji list-inline-item"><i class="em em---1"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-angry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-anguished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-astonished"></i> </li>
                                        <li class="emoji list-inline-item"><i class="em em-blush"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-clap"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-cry"></i></li>
                                        <li class="emoji list-inline-item"><i class="em em-full_moon_with_face"></i></li>
                                    </ul>
                                </div>
                                <a href="#" class="d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-message-circle text-dark text-grey-900 btn-round-sm font-lg"></i><span class="d-none-xss">22 Comment</span></a>
                                <a href="#" class="ms-auto d-flex align-items-center fw-600 text-grey-900 text-dark lh-26 font-xssss"><i class="feather-share-2 text-grey-900 text-dark btn-round-sm font-lg"></i><span class="d-none-xs">Share</span></a>
                            </div>
                        </div>


                        <div class="card w-100 text-center shadow-xss rounded-xxl border-0 p-4 mb-3 mt-3">
                            <div class="snippet mt-2 ms-auto me-auto" data-title=".dot-typing">
                                <div class="stage">
                                    <div class="dot-typing"></div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="col-xl-4 col-xxl-3 col-lg-4 ps-lg-0">
                        <div class="card w-100 shadow-xss rounded-xxl border-0 mb-3">
                            <div class="card-body d-flex align-items-center p-4">
                                <h4 class="fw-700 mb-0 font-xssss text-grey-900">Friend Request</h4>
                                <a href="default-member.html" class="fw-600 ms-auto font-xssss text-primary">See all</a>
                            </div>
                            <div class="card-body d-flex pt-4 ps-4 pe-4 pb-0 border-top-xs bor-0">
                                <figure class="avatar me-3"><img src="/images/user-7.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">12 mutual friends</span></h4>
                            </div>
                            <div class="card-body d-flex align-items-center pt-0 ps-4 pe-4 pb-4">
                                <a href="#" class="p-2 lh-20 w100 bg-primary-gradiant me-2 text-white text-center font-xssss fw-600 ls-1 rounded-xl">Confirm</a>
                                <a href="#" class="p-2 lh-20 w100 bg-grey text-grey-800 text-center font-xssss fw-600 ls-1 rounded-xl">Delete</a>
                            </div>

                            <div class="card-body d-flex pt-0 ps-4 pe-4 pb-0">
                                <figure class="avatar me-3"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Mohannad Zitoun <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">12 mutual friends</span></h4>
                            </div>
                            <div class="card-body d-flex align-items-center pt-0 ps-4 pe-4 pb-4">
                                <a href="#" class="p-2 lh-20 w100 bg-primary-gradiant me-2 text-white text-center font-xssss fw-600 ls-1 rounded-xl">Confirm</a>
                                <a href="#" class="p-2 lh-20 w100 bg-grey text-grey-800 text-center font-xssss fw-600 ls-1 rounded-xl">Delete</a>
                            </div>

                            <div class="card-body d-flex pt-0 ps-4 pe-4 pb-0">
                                <figure class="avatar me-3"><img src="/images/user-12.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-1">Mohannad Zitoun <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">12 mutual friends</span></h4>
                            </div>
                            <div class="card-body d-flex align-items-center pt-0 ps-4 pe-4 pb-4">
                                <a href="#" class="p-2 lh-20 w100 bg-primary-gradiant me-2 text-white text-center font-xssss fw-600 ls-1 rounded-xl">Confirm</a>
                                <a href="#" class="p-2 lh-20 w100 bg-grey text-grey-800 text-center font-xssss fw-600 ls-1 rounded-xl">Delete</a>
                            </div>
                        </div>

                        <div class="card w-100 shadow-xss rounded-xxl border-0 p-0 ">
                            <div class="card-body d-flex align-items-center p-4 mb-0">
                                <h4 class="fw-700 mb-0 font-xssss text-grey-900">Confirm Friend</h4>
                                <a href="default-member.html" class="fw-600 ms-auto font-xssss text-primary">See all</a>
                            </div>
                            <div class="card-body bg-transparent-card d-flex p-3 bg-greylight ms-3 me-3 rounded-3">
                                <figure class="avatar me-2 mb-0"><img src="/images/user-7.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-2">Anthony Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">12 mutual friends</span></h4>
                                <a href="#" class="btn-round-sm bg-white text-grey-900 feather-chevron-right font-xss ms-auto mt-2"></a>
                            </div>
                            <div class="card-body bg-transparent-card d-flex p-3 bg-greylight m-3 rounded-3" style="margin-bottom: 0 !important;">
                                <figure class="avatar me-2 mb-0"><img src="/images/user-8.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-2"> David Agfree  <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">12 mutual friends</span></h4>
                                <a href="#" class="btn-round-sm bg-white text-grey-900 feather-plus font-xss ms-auto mt-2"></a>
                            </div>
                            <div class="card-body bg-transparent-card d-flex p-3 bg-greylight m-3 rounded-3">
                                <figure class="avatar me-2 mb-0"><img src="/images/user-12.png" alt="image" class="shadow-sm rounded-circle w45"></figure>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-2">Hugury Daugloi <span class="d-block font-xssss fw-500 mt-1 lh-3 text-grey-500">12 mutual friends</span></h4>
                                <a href="#" class="btn-round-sm bg-white text-grey-900 feather-plus font-xss ms-auto mt-2"></a>
                            </div>

                        </div>

                        <div class="card w-100 shadow-xss rounded-xxl border-0 mb-3 mt-3">
                            <div class="card-body d-flex align-items-center p-4">
                                <h4 class="fw-700 mb-0 font-xssss text-grey-900">Suggest Group</h4>
                                <a href="default-group.html" class="fw-600 ms-auto font-xssss text-primary">See all</a>
                            </div>
                            <div class="card-body d-flex pt-4 ps-4 pe-4 pb-0 overflow-hidden border-top-xs bor-0">
                                <img src="/images/e-2.jpg" alt="img" class="img-fluid rounded-xxl mb-2">
                            </div>
                            <div class="card-body dd-block pt-0 ps-4 pe-4 pb-4">
                                <ul class="memberlist mt-1 mb-2 ms-0 d-block">
                                    <li class="w20"><a href="#"><img src="/images/user-6.png" alt="user" class="w35 d-inline-block" style="opacity: 1;"></a></li>
                                    <li class="w20"><a href="#"><img src="/images/user-7.png" alt="user" class="w35 d-inline-block" style="opacity: 1;"></a></li>
                                    <li class="w20"><a href="#"><img src="/images/user-8.png" alt="user" class="w35 d-inline-block" style="opacity: 1;"></a></li>
                                    <li class="w20"><a href="#"><img src="/images/user-3.png" alt="user" class="w35 d-inline-block" style="opacity: 1;"></a></li>
                                    <li class="last-member"><a href="#" class="bg-greylight fw-600 text-grey-500 font-xssss w35 ls-3 text-center" style="height: 35px; line-height: 35px;">+2</a></li>
                                    <li class="ps-3 w-auto ms-1"><a href="#" class="fw-600 text-grey-500 font-xssss">Member apply</a></li>
                                </ul>
                            </div>



                        </div>

                        <div class="card w-100 shadow-xss rounded-xxl border-0 mb-3">
                            <div class="card-body d-flex align-items-center p-4">
                                <h4 class="fw-700 mb-0 font-xssss text-grey-900">Suggest Pages</h4>
                                <a href="default-group.html" class="fw-600 ms-auto font-xssss text-primary">See all</a>
                            </div>
                            <div class="card-body d-flex pt-4 ps-4 pe-4 pb-0 overflow-hidden border-top-xs bor-0">
                                <img src="/images/g-2.jpg" alt="img" class="img-fluid rounded-xxl mb-2">
                            </div>
                            <div class="card-body d-flex align-items-center pt-0 ps-4 pe-4 pb-4">
                                <a href="#" class="p-2 lh-28 w-100 bg-grey text-grey-800 text-center font-xssss fw-700 rounded-xl"><i class="feather-external-link font-xss me-2"></i> Like Page</a>
                            </div>

                            <div class="card-body d-flex pt-0 ps-4 pe-4 pb-0 overflow-hidden">
                                <img src="/images/g-3.jpg" alt="img" class="img-fluid rounded-xxl mb-2 bg-lightblue">
                            </div>
                            <div class="card-body d-flex align-items-center pt-0 ps-4 pe-4 pb-4">
                                <a href="#" class="p-2 lh-28 w-100 bg-grey text-grey-800 text-center font-xssss fw-700 rounded-xl"><i class="feather-external-link font-xss me-2"></i> Like Page</a>
                            </div>


                        </div>


                        <div class="card w-100 shadow-xss rounded-xxl border-0 mb-3">
                            <div class="card-body d-flex align-items-center  p-4">
                                <h4 class="fw-700 mb-0 font-xssss text-grey-900">Event</h4>
                                <a href="default-event.html" class="fw-600 ms-auto font-xssss text-primary">See all</a>
                            </div>
                            <div class="card-body d-flex pt-0 ps-4 pe-4 pb-3 overflow-hidden">
                                <div class="bg-success me-2 p-3 rounded-xxl"><h4 class="fw-700 font-lg ls-3 lh-1 text-white mb-0"><span class="ls-1 d-block font-xsss text-white fw-600">FEB</span>22</h4></div>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-2">Meeting with clients <span class="d-block font-xsssss fw-500 mt-1 lh-4 text-grey-500">41 madison ave, floor 24 new work, NY 10010</span> </h4>
                            </div>

                            <div class="card-body d-flex pt-0 ps-4 pe-4 pb-3 overflow-hidden">
                                <div class="bg-warning me-2 p-3 rounded-xxl"><h4 class="fw-700 font-lg ls-3 lh-1 text-white mb-0"><span class="ls-1 d-block font-xsss text-white fw-600">APR</span>30</h4></div>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-2">Developer Programe <span class="d-block font-xsssss fw-500 mt-1 lh-4 text-grey-500">41 madison ave, floor 24 new work, NY 10010</span> </h4>
                            </div>

                            <div class="card-body d-flex pt-0 ps-4 pe-4 pb-3 overflow-hidden">
                                <div class="bg-primary me-2 p-3 rounded-xxl"><h4 class="fw-700 font-lg ls-3 lh-1 text-white mb-0"><span class="ls-1 d-block font-xsss text-white fw-600">APR</span>23</h4></div>
                                <h4 class="fw-700 text-grey-900 font-xssss mt-2">Aniversary Event <span class="d-block font-xsssss fw-500 mt-1 lh-4 text-grey-500">41 madison ave, floor 24 new work, NY 10010</span> </h4>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <!-- main content -->

    <!-- right chat -->
    <div class="right-chat nav-wrap mt-2 right-scroll-bar">
        <div class="middle-sidebar-right-content bg-white shadow-xss rounded-xxl">

            <!-- loader wrapper -->
            <div class="preloader-wrap p-3">
                <div class="box shimmer">
                    <div class="lines">
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                    </div>
                </div>
                <div class="box shimmer mb-3">
                    <div class="lines">
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                    </div>
                </div>
                <div class="box shimmer">
                    <div class="lines">
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                        <div class="line s_shimmer"></div>
                    </div>
                </div>
            </div>
            <!-- loader wrapper -->

            <div class="section full pe-3 ps-4 pt-4 position-relative feed-body">
                <h4 class="font-xsssss text-grey-500 text-uppercase fw-700 ls-3">CONTACTS</h4>
                <ul class="list-group list-group-flush">
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-8.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Hurin Seary</a>
                        </h3>
                        <span class="badge badge-primary text-white badge-pill fw-500 mt-0">2</span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-7.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Victor Exrixon</a>
                        </h3>
                        <span class="bg-success ms-auto btn-round-xss"></span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-6.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Surfiya Zakir</a>
                        </h3>
                        <span class="bg-warning ms-auto btn-round-xss"></span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-5.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Goria Coast</a>
                        </h3>
                        <span class="bg-success ms-auto btn-round-xss"></span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-4.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Hurin Seary</a>
                        </h3>
                        <span class="badge mt-0 text-grey-500 badge-pill pe-0 font-xsssss">4:09 pm</span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-3.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">David Goria</a>
                        </h3>
                        <span class="badge mt-0 text-grey-500 badge-pill pe-0 font-xsssss">2 days</span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-2.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Seary Victor</a>
                        </h3>
                        <span class="bg-success ms-auto btn-round-xss"></span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">
                        <figure class="avatar float-left mb-0 me-2">
                            <img src="/images/user-12.png" alt="image" class="w35">
                        </figure>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Ana Seary</a>
                        </h3>
                        <span class="bg-success ms-auto btn-round-xss"></span>
                    </li>

                </ul>
            </div>
            <div class="section full pe-3 ps-4 pt-4 pb-4 position-relative feed-body">
                <h4 class="font-xsssss text-grey-500 text-uppercase fw-700 ls-3">GROUPS</h4>
                <ul class="list-group list-group-flush">
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">

                        <span class="btn-round-sm bg-primary-gradiant me-3 ls-3 text-white font-xssss fw-700">UD</span>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Studio Express</a>
                        </h3>
                        <span class="badge mt-0 text-grey-500 badge-pill pe-0 font-xsssss">2 min</span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">

                        <span class="btn-round-sm bg-gold-gradiant me-3 ls-3 text-white font-xssss fw-700">AR</span>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Armany Design</a>
                        </h3>
                        <span class="bg-warning ms-auto btn-round-xss"></span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">

                        <span class="btn-round-sm bg-mini-gradiant me-3 ls-3 text-white font-xssss fw-700">UD</span>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">De fabous</a>
                        </h3>
                        <span class="bg-success ms-auto btn-round-xss"></span>
                    </li>
                </ul>
            </div>
            <div class="section full pe-3 ps-4 pt-0 pb-4 position-relative feed-body">
                <h4 class="font-xsssss text-grey-500 text-uppercase fw-700 ls-3">Pages</h4>
                <ul class="list-group list-group-flush">
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">

                        <span class="btn-round-sm bg-primary-gradiant me-3 ls-3 text-white font-xssss fw-700">AB</span>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Armany Seary</a>
                        </h3>
                        <span class="bg-success ms-auto btn-round-xss"></span>
                    </li>
                    <li class="bg-transparent list-group-item no-icon pe-0 ps-0 pt-2 pb-2 border-0 d-flex align-items-center">

                        <span class="btn-round-sm bg-gold-gradiant me-3 ls-3 text-white font-xssss fw-700">SD</span>
                        <h3 class="fw-700 mb-0 mt-0">
                            <a class="font-xssss text-grey-600 d-block text-dark model-popup-chat" href="#">Entropio Inc</a>
                        </h3>
                        <span class="bg-success ms-auto btn-round-xss"></span>
                    </li>

                </ul>
            </div>

        </div>
    </div>


    <!-- right chat -->

    <div class="app-footer border-0 shadow-lg bg-primary-gradiant">
        <a href="default.html" class="nav-content-bttn nav-center"><i class="feather-home"></i></a>
        <a href="default-video.html" class="nav-content-bttn"><i class="feather-package"></i></a>
        <a href="default-live-stream.html" class="nav-content-bttn" data-tab="chats"><i class="feather-layout"></i></a>
        <a href="shop-2.html" class="nav-content-bttn"><i class="feather-layers"></i></a>
        <a href="default-settings.html" class="nav-content-bttn"><img src="/images/female-profile.png" alt="user" class="w30 shadow-xss"></a>
    </div>

    <div class="app-header-search">
        <form class="search-form">
            <div class="form-group searchbox mb-0 border-0 p-1">
                <input type="text" class="form-control border-0" placeholder="Search...">
                <i class="input-icon">
                    <!-- <ion-icon name="search-outline" role="img" class="md hydrated" aria-label="search outline"></ion-icon> -->
                </i>
                <a href="#" class="ms-1 mt-1 d-inline-block close searchbox-close">
                    <i class="ti-close font-xs"></i>
                </a>
            </div>
        </form>
    </div>

</div>

<div class="modal bottom side fade" id="Modalstory" tabindex="-1" role="dialog" style=" overflow-y: auto;">
     <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 bg-transparent">
            <button type="button" class="close mt-0 position-absolute top--30 right--10" data-dismiss="modal" aria-label="Close"><i class="ti-close text-grey-900 font-xssss"></i></button>
            <div class="modal-body p-0">
                <div class="card w-100 border-0 rounded-3 overflow-hidden bg-gradiant-bottom bg-gradiant-top">
                    <div class="owl-carousel owl-theme dot-style3 story-slider owl-dot-nav nav-none">
                        <div class="item"><img src="/images/story-5.jpg" alt="image"></div>
                        <div class="item"><img src="/images/story-6.jpg" alt="image"></div>
                        <div class="item"><img src="/images/story-7.jpg" alt="image"></div>
                        <div class="item"><img src="/images/story-8.jpg" alt="image"></div>

                    </div>
                </div>
                <div class="form-group mt-3 mb-0 p-3 position-absolute bottom-0 z-index-1 w-100">
                    <input type="text" class="style2-input w-100 bg-transparent border-light-md p-3 pe-5 font-xssss fw-500 text-white" value="Write Comments">
                    <span class="feather-send text-white font-md text-white position-absolute" style="bottom: 35px;right:30px;"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal-popup-chat">
    <div class="modal-popup-wrap bg-white p-0 shadow-lg rounded-3">
        <div class="modal-popup-header w-100 border-bottom">
            <div class="card p-3 d-block border-0 d-block">
                <figure class="avatar mb-0 float-left me-2">
                    <img src="/images/user-12.png" alt="image" class="w35 me-1">
                </figure>
                <h5 class="fw-700 text-primary font-xssss mt-1 mb-1">Hendrix Stamp</h5>
                <h4 class="text-grey-500 font-xsssss mt-0 mb-0"><span class="d-inline-block bg-success btn-round-xss m-0"></span> Available</h4>
                <a href="#" class="font-xssss position-absolute right-0 top-0 mt-3 me-4"><i class="ti-close text-grey-900 mt-2 d-inline-block"></i></a>
            </div>
        </div>
        <div class="modal-popup-body w-100 p-3 h-auto">
            <div class="message"><div class="message-content font-xssss lh-24 fw-500">Hi, how can I help you?</div></div>
            <div class="date-break font-xsssss lh-24 fw-500 text-grey-500 mt-2 mb-2">Mon 10:20am</div>
            <div class="message self text-right mt-2"><div class="message-content font-xssss lh-24 fw-500">I want those files for you. I want you to send 1 PDF and 1 image file.</div></div>
            <div class="snippet pt-3 ps-4 pb-2 pe-3 mt-2 bg-grey rounded-xl float-right" data-title=".dot-typing"><div class="stage"><div class="dot-typing"></div></div></div>
            <div class="clearfix"></div>
        </div>
        <div class="modal-popup-footer w-100 border-top">
            <div class="card p-3 d-block border-0 d-block">
                <div class="form-group icon-right-input style1-input mb-0"><input type="text" placeholder="Start typing.." class="form-control rounded-xl bg-greylight border-0 font-xssss fw-500 ps-3"><i class="feather-send text-grey-500 font-md"></i></div>
            </div>
        </div>
    </div>
</div>
</div>
</template>
<!--需要修改的search-outline-->
<script>
import TopNav from './TopNav.vue' //顶部栏菜单
import LeftNav from './LeftNav.vue' //左侧菜单
import Message_casting from './Message_casting.vue'  //滚动公告栏
import Message_publish from'./Message_publish.vue'
//import $ from 'jquery';
// import '/js/plugin.js'
// import '/js/lightbox.js'
// import '/js/scripts.js'

// import '/css/themify-icons.css';
// import '/css/feather.css';
// /*Custom Stylesheet*/
// import '/css/style.css';
// import '/css/emoji.css';
// import '/css/lightbox.css';

export default {
    components: {
        TopNav, //顶部导航栏
        LeftNav, //左边导航栏
      Message_casting, //滚动公告栏
      Message_publish //消息发布
  },
  data() {
    return {
      images: [
        { src: 'https://img0.baidu.com/it/u=807618245,1297021210&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' }, // 图片的 URL
        { src: 'https://img0.baidu.com/it/u=807618245,1297021210&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' },
        { src: 'https://img0.baidu.com/it/u=807618245,1297021210&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500' }
      ]
    };
  },
    head() {
    // 引入js,css
    return {
      link: [
        { rel: 'stylesheet', href: '/css/themify-icons.css' },
        { rel: 'stylesheet', href: '/css/feather.css' },
        { rel: 'stylesheet', href: '/css/style.css' },
        { rel: 'stylesheet', href: '/css/emoji.css' },
       // { rel: 'stylesheet', href: '/css/lightbox.css' }
      ],
    script: [
      //{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'},
        {src: '/js/jquery.min.js' },
        { src: '/js/plugin.js' },
        //{ src: '/js/lightbox.js' },
        { src: '/js/scripts.js' },

    ]
    }
  }

}
</script>

<style scoped>
.gntopnav{
  display: block;
}
.item-carousel{
  border: 2px solid red !important;
  width: auto !important;
  height: 300px !important;

  overflow: hidden; /* 防止图片溢出 */
}
.carousel-image {
  /*width: 710px;
  height: 200px;*/
  width: 100%;
  height: auto; /* 让图片自适应宽度 */
  display: block; /* 避免图片底部留白 */
  text-align: center;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.el-carousel__item {
  background-color: transparent !important; /* 去除默认背景色 */
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.marquee-container {
  display: flex;
  align-items: center;
}

.announcement {
  margin-right: 10px; /* 调整公告栏与滚动文字之间的间距 */
}
.message_casting{
  width: 86%;
}
/* 媒体查询：在小屏幕设备上显示展开按钮 */
@media screen and (max-width: 768px) {
  .message_casting{
    width: 72%;
  }
}
</style>
